{% extends '::base.html.twig' %}

{% block body %}

	{% block javascript %}

	<script type="text/javascript">

		function favoriteAction(id, action) {
		
			var request;
			if (window.XMLHttpRequest) { 
				// code for IE7+, Firefox, Chrome, Opera, Safari
  				request = new XMLHttpRequest();
			} else {
  				// code for IE6, IE5
  				request = new ActiveXObject("Microsoft.XMLHTTP");
  			}
	
			request.onreadystatechange=function(){
 	
 				if (request.readyState==4 && request.status==200){
   					
   					if(request.responseText == "success") {
   				
	   					//flip favorite action image
   						if(action == "add")
   							showFavoriteAction("remove");
   						else 
   							showFavoriteAction("add");
   							
						//clear message if previous action resulted in error
   						hideMessage();   							
   					
   					} else {
   						
   						if(action == "add")
   							showMessage("There was a problem adding the show from your favorites");
   						else
   							showMessage("There was a problem removing the show from your favorites");
   					}
 				}
			}
		
			var path;
			if(action == "add")
				path = "{{ path('_favorites_add', {'format':'raw', 'id':''}) }}";
			else
				path = "{{ path('_favorites_remove', {'format':'raw', 'id':''}) }}";
	
			//hack to append the actual id to route
			path += "/" + id;
	
			request.open("GET", path, true);
			request.send(null);
		
		}
	
		function showFavoriteAction(action) {
		
			var div = document.getElementById("favoritesDiv");
			div.innerHTML = "";

			var img = document.createElement("img");
			img.height = "50";
			img.width = "50";
		
			if(action == "remove") {
				img.onclick = new Function("favoriteAction({{ series[0].id }}, 'remove');"); 
				img.src = "{{ asset('bundles/showstop/img/favorite_remove.png') }}";
				img.alt = "Remove From Favorites";
				img.title = "Remove From Favorites";
			} else {
				img.onclick = new Function("favoriteAction({{ series[0].id }}, 'add');"); 
				img.src = "{{ asset('bundles/showstop/img/favorite_add.png') }}";
				img.alt = "Add To Favorites";
				img.title = "Add To Favorites";
			}
		
			div.appendChild(img);
		}
		
		function showMessage(message) {
	
			var msg = document.getElementById("message");
			msg.innerHTML = message;
			msg.style.display = "block";
		}
	
		function hideMessage() {
		
			var msg = document.getElementById("message");
			msg.style.display = "none";
		}
	
	</script>

	{% endblock %}

	{{ parent() }}
		<div style="margin-top: 50px" id="tv-info">
		{% if is_granted('IS_AUTHENTICATED_FULLY') %}
			<div id="favoritesDiv" style="float: right;">
				{% if app.user.userFavorites.contains( series[0] ) %}
					<img height="50" width="50" onClick="favoriteAction({{ series[0].id }}, 'remove');" src="{{ asset('bundles/showstop/img/favorite_remove.png') }}" alt="Remove From Favorites" title="Remove From Favorites" />
				{% else %}
					<img height="50" width="50" onClick="favoriteAction({{ series[0].id }}, 'add');" src="{{ asset('bundles/showstop/img/favorite_add.png') }}" alt="Add To Favorites" title="Add To Favorites" />
				{% endif %}
			</div>	
		{% endif %}		
			<div style="margin-top: 50px" id="tv-info">
				<h3>Series: </h3>{{ series[0].name }} 
				{% if is_granted('IS_AUTHENTICATED_FULLY') %}
				<br style="clear: both" />
				<div style="float:left"><h3>Your Rating: </h3></div>
				
					<form id="rate" name="rate" action="{{ path('_addrating')}}" method="post">
						{{ form_widget(form.hdnRating)}}
						{{ form_widget(form.hdnUserID)}}
						{{ form_widget(form.hdnSeriesID)}}
						<div style="float:left">
							<ul class="rating {{ UserRating }}" id="UserRating">
								<li class="one">
									<a href="#" title="1 Star" onClick="document.getElementById('form_hdnRating').value = 1; document.getElementById('UserRating').className = 'rating onestar'; document.rate.submit();">1</a>
								</li>
								<li class="two">
									<a href="#" title="2 Stars" onClick="document.getElementById('form_hdnRating').value = 2; document.getElementById('UserRating').className = 'rating twostar'; document.rate.submit();">2</a>
								</li>
								<li class="three">
									<a href="#" title="3 Stars" onClick="document.getElementById('form_hdnRating').value = 3; document.getElementById('UserRating').className = 'rating threestar'; document.rate.submit();">3</a>
								</li>
								<li class="four">
									<a href="#" title="4 Stars" onClick="document.getElementById('form_hdnRating').value = 4; document.getElementById('UserRating').className = 'rating fourstar'; document.rate.submit();">4</a>
								</li>
								<li class="five">
									<a href="#" title="5 Stars" onClick="document.getElementById('form_hdnRating').value = 5; document.getElementById('UserRating').className = 'rating fivestar'; document.rate.submit();">5</a>					
								</li>
							</ul>
						</div> 
					</form>
				{%endif%}
				<br style="clear: both" />
				<div style="float:left"><h3>Average Rating: </h3></div>
				<div style="float:left">
					<ul class="ratingNoChange {{ OverallRating }}" id="OverallRating">
						<li class="one">
							<a href="#" title="1 Star">1</a>
						</li>
						<li class="two">
							<a href="#" title="2 Stars">2</a>
						</li>
						<li class="three">
							<a href="#" title="3 Stars">3</a>
						</li>
						<li class="four">
							<a href="#" title="4 Stars">4</a>
						</li>
						<li class="five">
							<a href="#" title="5 Stars">5</a>					
						</li>
					</ul>
				</div>

				<br style="clear: both" />
				<h3>First Aired: </h3>{{ series[0].firstaired }} 
				<br style="clear: both" />
				<h3 >Network: </h3>{{ series[0].network }} 
				<br style="clear: both" />
				<h3>Status: </h3>{{ series[0].status }}
				<br style="clear: both" />
				{% if series[0].status != "Ended" %}
				<h3>Return Date: </h3>{{ series[0].returnDate }} 
	<div style="margin-top: 50px" id="tv-info">
		{% if is_granted('IS_AUTHENTICATED_FULLY') %}
			<div id="favoritesDiv" style="float: right;">
				{% if app.user.userFavorites.contains( series[0] ) %}
					<img height="50" width="50" onClick="favoriteAction({{ series[0].id }}, 'remove');" src="{{ asset('bundles/showstop/img/favorite_remove.png') }}" alt="Remove From Favorites" title="Remove From Favorites" />
				{% else %}
					<img height="50" width="50" onClick="favoriteAction({{ series[0].id }}, 'add');" src="{{ asset('bundles/showstop/img/favorite_add.png') }}" alt="Add To Favorites" title="Add To Favorites" />
				{% endif %}
			</div>
		{% endif %}
		<p id="message" style="color: red; display: none;" />
		<h3>Series: </h3>{{ series[0].name }} 
		<br style="clear: both" />
		<h3>First Aired: </h3>{{ series[0].firstaired }} 
		<br style="clear: both" />
		<h3 >Network: </h3>{{ series[0].network }} 
		<br style="clear: both" />
		<h3>Status: </h3>{{ series[0].status }}
		<br style="clear: both" />
		{% if series[0].status != "Ended" %}
			<h3>Return Date: </h3>{{ series[0].returnDate }} 
		{% endif %}
		<br style="clear: both" /><br />
		<h3 style="float: none;">Description: </h3>{{ series[0].description }}
			</div>
		</div>
 {% endblock %}


